<template>
  <el-container class="rich_content create-task-index">
    <el-main class="home">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-tooltip class="item" effect="dark" content="仅适用于yszlive.sztv.com.cn页面" placement="top">
            <h2>大数据智慧运营管理中心</h2>
          </el-tooltip>

          <CreateTaskForm @showTaskLists="openDrawer"></CreateTaskForm>
        </el-col>
        <el-col :span="8" class="log">
          <el-container class="log">
            <el-header height="30px">
              <div class="left">
                <i class="el-icon-c-scale-to-original" />
                <span class="t">任务日志</span>
              </div>
              <div class="right">
                <el-tooltip class="item" effect="dark" content="清空日志" placement="top">
                  <i @click="deleteLogs" class="el-icon-delete" circle></i>
                </el-tooltip>

              </div>
            </el-header>
            <el-main>
              <OutputLog></OutputLog>
            </el-main>
          </el-container>
        </el-col>
      </el-row>
    </el-main>
    <el-drawer
        title="任务列表"
        size="75%"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
      <TaskListsIndex></TaskListsIndex>
    </el-drawer>
  </el-container>

</template>

<script>
import CreateTaskForm from "@/components/task/CreateTaskForm";
import OutputLog from "@/components/task/OutputLog";
import TaskListsIndex from "./TaskListsIndex";
export default {
  name: "CreateTaskIndex",
  data(){
    return {
      drawer: false,
      direction: 'rtl',
    }
  },
  methods:{
    openDrawer(){
      this.drawer = true
    },
    deleteLogs(){
      this.$store.dispatch('deleteLogs')
    },
    handleClose(done) {
      done();
    }
  },
  components: {TaskListsIndex, OutputLog, CreateTaskForm}
}
</script>

<style scoped>
.create-task-index{
  background-color: #fff;
  border-radius: 6px;
}
.create-task-index .el-main.home{
  position: relative;
  height: 100%;
  box-shadow: 2px 5px 20px -3px rgba(44, 138, 248, .18);
}
.create-task-index .el-main .el-row{
  height: 100%;
}
.create-task-index .el-main .el-row .el-col{
  height: 100%;
}
.create-task-index .el-main .el-row .el-col.log{
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 15px rgb(0 0 0 / 5%);
}
.create-task-index .el-main .el-row .el-col.log .el-container.log{
  height: 100%;
}
.create-task-index .el-main h2{
  text-align: center;
  flex-shrink: 0;
  font-size: 24px;
  color: #2c8af8;
  font-weight: 500;
  text-shadow: 0 2px 6px rgba(44,138,248,.4);
  line-height: 32px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e3e3;
}
.create-task-index .el-main h2 .url{
  font-size: 14px;
  line-height: 14px;
}
.create-task-index .el-main .el-row .el-col .el-header{
  padding: 0px;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}

.create-task-index .el-main .el-row .el-col .el-header .left{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  font-size: 14px;
}
.create-task-index .el-main .el-row .el-col .el-header .left i{
  font-size: 16px;
}
.create-task-index .el-main .el-row .el-col .el-header .left .t{
  font-size: 12px;
  padding-left: 5px;
}
.create-task-index .el-main .el-row .el-col .el-header .right{
  font-size: 16px;
}
.create-task-index .el-main .el-row .el-col .el-header .right i{
  cursor: pointer;
}
.create-task-index .el-main .el-row .el-col .el-main{
  padding:5px;
  height: 500px;
  overflow-y: scroll;
}
</style>
